<template>
  <div v-drag v-show="isAttributeShow" class="attribute_db">
    <div class="u-main">
      <div class="attributeSearchForm">
        <el-table
          v-loading="loading"
          :data="attributeTableData.filter(filtersQuery).slice((this.currentPage - 1) * this.pageSize,this.pageSize *this.currentPage )"
          @row-click="tableRowClick($event)"
          style="width: 100%"
          height="244"
          header-row-class-name="headRowClass"
        >
          <el-table-column
            v-for="(field,index) in fields"
            :key="index"
            show-overflow-tooltip
            :prop="field.k"
            :label="field.v"
          ></el-table-column>
        </el-table>
      </div>
      <i class="tab-pane-header-btn el-icon-close" @click="closeAttributeTable"></i>
    </div>
    <div class="u-foot">
      <div class="device-filter-toolbar">
        <span class="device-filter-label">
          <b>筛选:</b>
        </span>
        <el-select class="query-select" v-model="queryField" size="mini" placeholder="请选择">
          <el-option v-for="(field,index) in fields" :key="index" :label="field.v" :value="field.k"></el-option>
        </el-select>
        <el-input
          class="filter"
          v-model="query"
          size="mini"
          placeholder="关键字搜索"
          @keyup.enter.native="filtersQuery"
          clearable
          :disabled="queryField===''"
        ></el-input>
      </div>
      <div style="float:right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="attributeDataCount"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import store from '@/store'
import BoxUtil from "@/assets/js/utils/BoxUtil.js";


export default {
  name: "index",
  data() {
    return {
      currentPage: 1, //初始页
      pageSize: 10, //每页的数据
      loading: false, //加载等待框
      query: "", //查询条件
      queryField: "", //查询字段
      total: 0, //总记录数
      /**
       * 属性字典
       * @returns {*}
       */
     

      marker: undefined
    };
  },

  directives: {
    drag: {
      // 指令的定义
      bind: function(el) {
        const odiv = el; // 获取当前元素
        odiv.onmousedown = e => {
          // 算出鼠标相对元素的位置
          const disX = e.clientX - odiv.offsetLeft;
          const disY = e.clientY - odiv.offsetTop;
          
          document.onmousemove = e => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            const left = e.clientX - disX;
            const top = e.clientY - disY;
            // 移动当前元素
            odiv.style.left = left + "px";
            odiv.style.top = top + "px";
          };
          document.onmouseup = e => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  },


  
  methods: {
    /**
     * 更改页数
     * @param size
     */
    handleSizeChange(size) {
      this.pageSize = size;
     
    },
    /**
     * 翻页
     * @param currentPage
     */
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      
    },
    /**
     * 过滤条件
     * @param data
     * @param index
     * @param array
     * @returns {boolean}
     */
    filtersQuery(item) {
      if(this.queryField==="" || this.query===""){
        return true;
      }
      return item[this.queryField] ? item[this.queryField].indexOf(this.query) > -1 : true;
    },

    /**
     * 点击表格
     * @param $event
     */
    tableRowClick($event) {
     
      let centerPoint = undefined;
      switch ($event.F_Geometry.type) {
        case "Point":
          centerPoint = new Object();
          centerPoint.lat = $event.F_Geometry.coordinates[1];
          centerPoint.lng = $event.F_Geometry.coordinates[0];
          break;
        case "LineString":
           centerPoint = BoxUtil.getCenterOfLine($event.F_Geometry.coordinates);
         
        case "Polygon":
        default:
           centerPoint = BoxUtil.getRegionCenter($event.F_Geometry.coordinates[0]);
        
          break;
      }

      if (this.marker) {
        this.marker.setLngLat([
          parseFloat(centerPoint.lng),
          parseFloat(centerPoint.lat)
        ]);
      } else {
        this.marker = new mapboxgl.Marker()
          .setLngLat([parseFloat(centerPoint.lng), parseFloat(centerPoint.lat)])
          .addTo(this.mapboxServiceSync.getMap(1));
      }
    
      this.mapboxServiceSync.getMap(0).flyTo({
        center: centerPoint,
        zoom: 14
      });
       this.mapboxServiceSync.getMap(1).flyTo({
        center: centerPoint,
        zoom: 14
      });
   
    },
    /**
     * 关闭属性表并清除高亮
     */
    closeAttributeTable() {
      this.$store.commit("hzzSys/setAttributeTableIsShow", false);
      //this.mapboxServiceSync.getMap(1).getSource("statisData").setData({type:"FeatureCollection",features:[]})
    },
    /**
     * 请求数据
     */
    requestData() {
      this.loading = true;
      this.staticsParams.skip = (this.currentPage - 1) * this.pageSize;
      this.staticsParams.limit = this.pageSize;
      this.$store
        .dispatch("hzzSys/Type_Feature", this.staticsParams)
        .then(res => {
          this.loading = false;
        })
        .catch(e => {
          this.loading = false;
        });
    }
  },
  computed: {
    ...mapState({
      /**
       * 当前查询自定义图层
       * @param state
       * @returns {currentSearchLayer|(function(*))|*}
       */
      currentSearchLayer(state) {
        return state.eswyzt.currentSearchLayer;
      },
      /**
       * 显示属性表并查询数据
       * @param state
       * @returns {*}
       */
      isAttributeShow(state) {
        return state.hzzSys.attributeTableIsShow;
      },
      /**
       * 组织properties数据
       * @param state
       * @returns {any[]}
       */
      attributeTableData(state) {
        return state.hzzSys.attributeTableData;
      },
      /**
       * 查询图层的请求回来要素集合
       * @param state
       * @returns {attributeTableData|(function(*): any[])|Array|*}
       */
      staticsParams(state) {
        return state.hzzSys.staticParams;
      },

      attributeDataCount(state) {
        return state.hzzSys.attributeDataCount;
      },
      /**
       * 地图服务类
       */
      mapService(state) {
        return state.eswyzt.mapService;
      },
      fields(state){
        return state.hzzSys.attributeDic;
      },
       mapboxServiceSync(state) {
        return state.eswyzt.mapServiceSync;
      },
    })
  },
  watch: {
    isAttributeShow:function(n, o){
    
      if (o) {
        // 关闭搜索
        if (this.marker) {
          this.marker.remove();
          this.marker = undefined;
        };
      }
    }
  }
};
</script>


<style>
.attribute_db {
  position: absolute;
  left: 18%;
  bottom: 20px;
  z-index: 999;
  width: 78em;
  height: 280px;
  color: white;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  /* border: 2px solid rgb(22, 133, 216); */
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 15px 15px rgba(0, 0, 0, 0.22);
}

.attribute_db .attributeCloseBtn {
  margin-top: 0px;
}

.attribute_db .u-main {
  height: 245px;
  background-color: rgba(255, 255, 255, 0);
}

.attribute_db .u-foot {
  height: 35px;
  background-color: #398f8699;
}

.attribute_db .el-table td,
.el-table th {
  padding: 5px 0;
}

.attribute_db .el-table td {
  color: #fff;
}

.attribute_db .el-input__inner {
  height: 30px;
  border-radius: 0px;
}

.attribute_db .el-button {
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 0px;
}

.attribute_db .filter {
  width: 150px;
}

.attribute_db .attributeSearcForm {
  float: right;
  margin-right: 10px;
}

.attribute_db .el-form-item {
  margin-bottom: 0px;
}

.attribute_db .headRowClass {
  color: #ffff;
  line-height: 10px;
}

.attribute_db .headRowClass th {
  background-color: #398f8699;
}

.attribute_db .tab-pane-header-btn {
  position: absolute;
  right: -19px;
  margin: 10px;
  top: -20px;
  font-size: 16px;
  transition: transform 0.3s;
  background-color: #f44336;
  border-radius: 10px;
  color: #fff;
  padding: 2px;
  z-index: 900;
  cursor: pointer;
}

.attribute_db .tab-pane-header-btn {
  position: absolute;
  right: -19px;
  margin: 10px;
  top: -20px;
  font-size: 16px;
  transition: transform 0.3s;
  background-color: #f44336;
  border-radius: 10px;
  color: #fff;
  padding: 2px;
  z-index: 900;
}

.attribute_db .tab-pane-header-btn:hover {
  cursor: pointer;
}

.attribute_db .device-filter-toolbar {
  display: inline-block;
  margin-left: 10px;
}

.attribute_db .device-filter-label {
  color: #409eff;
  font-size: 14px;
}

.attribute_db .el-table__footer-wrapper,
.el-table__header-wrapper {
  overflow: hidden;
  /*background: rgba(0, 0, 0, 0);*/
}

.attribute_db .el-table {
  background-color: rgba(0, 0, 0, 0);
}

.attribute_db .el-table__row:hover {
  color: black;
}

.attribute_db .el-table tbody tr:hover > td {
  background-color: #0003 !important;
}

.attribute_db .el-input__inner,
.el-select-dropdown__item {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}
.attribute_db .el-pagination .el-select .el-input .el-input__inner {
  border-radius: 0px;
  height: 30px;
}

.attribute_db .el-select-dropdown {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}
/**
   * 全局下拉列表背景颜色
   */
.attribute_db .el-select-dropdown {
  background-color: #000000d0;
  border-radius: 0px;
  color: #fff;
}

.attribute_db .el-select-dropdown__item.hover,
.attribute_db .el-select-dropdown__item:hover {
  background-color: #000b;
  color: #398f8699;
}
/**
    * 下拉列表Select选中项的背景颜色
    */
.attribute_db .el-select-dropdown__item.selected {
  color: #fff;
  font-weight: 700;
  background-color: rgba(0, 0, 0, 0.9);
}

/**
   * 分页背景
   */
.attribute_db .el-pagination {
  background-color: #ffffff00;
  color: white;
}

/**
  * 地名地址数据类别背景透明
  */
.attribute_db el-pagination .el-pager,
.el-pager li {
  background-color: #ffffff00;
}

/**
   * 分页上一页背景
   */
.attribute_db .el-pagination .btn-prev {
  background-color: #ffffff00;
}

/**
  * 分页下一页背景
  */
.attribute_db .el-pagination .btn-next {
  background-color: #ffffff00;
}

/**
  * 总共多少条背景颜色
  */
.attribute_db .el-pagination span {
  color: white;
}

/* background-color: rgb(229, 229, 229, 0.6); */
.attribute_db .el-loading-mask {
  background-color: #fff0;
}
</style>
